<template>
  <div class="mobile-card-query">
    <!-- 顶部导航栏 -->
    <div class="mobile-header">
      <div class="header-content">
        <h1 class="header-title">
          <i class="bi bi-credit-card-2-front"></i>
          患者卡信息查询
        </h1>
        <div class="header-actions">
          <button class="btn btn-sm btn-outline-light" @click="refreshData" :disabled="loading">
            <i class="bi bi-arrow-clockwise"></i>
          </button>
          <button class="btn btn-sm btn-outline-light" @click="goBack">
            <i class="bi bi-arrow-left"></i>
          </button>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="mobile-content">
      <!-- 查询表单 -->
      <div class="query-section">
        <div class="query-card">
          <div class="query-header">
            <i class="bi bi-search"></i>
            <span class="query-title">患者信息查询</span>
          </div>
          <div class="query-body">
            <div class="input-wrapper">
              <div class="input-group">
                <label class="input-label">姓名</label>
                <input 
                  type="text" 
                  class="query-input" 
                  v-model="patientName" 
                  placeholder="请输入患者姓名"
                  @keyup.enter="queryPatientCardInfo"
                >
              </div>
            </div>
            <div class="input-wrapper">
              <div class="input-group">
                <label class="input-label">手机号</label>
                <input 
                  type="tel" 
                  class="query-input" 
                  v-model="phoneNumber" 
                  placeholder="请输入患者手机号码"
                  maxlength="11"
                  @input="validatePhoneNumber"
                  @keyup.enter="queryPatientCardInfo"
                >
              </div>
              <div v-if="phoneError" class="error-tip">
                <i class="bi bi-exclamation-triangle"></i>
                {{ phoneError }}
              </div>
            </div>
            <div class="input-wrapper">
              <div class="input-group">
                <label class="input-label">身份证号</label>
                <input 
                  type="text" 
                  class="query-input" 
                  v-model="idNumber" 
                  placeholder="请输入身份证号码"
                  maxlength="18"
                  @input="validateIdNumber"
                  @keyup.enter="queryPatientCardInfo"
                >
              </div>
              <div v-if="idError" class="error-tip">
                <i class="bi bi-exclamation-triangle"></i>
                {{ idError }}
              </div>
            </div>
            <button 
              class="btn btn-primary btn-lg w-100 query-btn" 
              @click="queryPatientCardInfo"
              :disabled="loading || !canQuery"
            >
              <i class="bi bi-search" v-if="!loading"></i>
              <div class="spinner-small" v-if="loading"></div>
              <span v-if="loading">查询中...</span>
              <span v-else>查询患者卡信息</span>
            </button>
          </div>
        </div>
      </div>

      <!-- 查询结果 -->
      <div class="results-section" v-if="hasSearched">
        <!-- 有数据时显示结果 -->
        <div v-if="patientCards.length > 0" class="card-list">
          <div class="results-header">
            <div class="results-title">
              <i class="bi bi-list-ul"></i>
              患者卡信息 ({{ patientCards.length }}条)
            </div>
            <div class="results-info">
              查询条件: {{ getSearchCondition() }}
            </div>
          </div>

          <div v-for="card in patientCards" :key="card.patientId" class="card-item">
            <!-- 患者基本信息 -->
            <div class="card-header">
              <div class="patient-info">
                <div class="patient-name">
                  <i class="bi bi-person-fill"></i>
                  {{ card.name || '-' }}
                </div>
                <div class="patient-id" v-if="card.patientId">
                  ID: {{ card.patientId }}
                </div>
              </div>
              <div class="card-actions">
                <button class="btn btn-outline-primary btn-sm detail-btn" @click="showCardDetail(card)">
                  <i class="bi bi-eye"></i>
                  详情
                </button>
              </div>
            </div>

            <!-- 患者简要信息 -->
            <div class="card-summary">
              <div class="summary-row">
                <span class="summary-label">性别:</span>
                <span class="summary-value">{{ card.sex || '-' }}</span>
              </div>
              <div class="summary-row">
                <span class="summary-label">生日:</span>
                <span class="summary-value">{{ formatDate(card.dateOfBirth) || '-' }}</span>
              </div>
              <div class="summary-row">
                <span class="summary-label">手机号:</span>
                <span class="summary-value phone">
                  <i class="bi bi-telephone"></i>
                  {{ formatPhoneNumber(card.phoneNumber1) }}
                </span>
              </div>
              <div class="summary-row">
                <span class="summary-label">身份证:</span>
                <span class="summary-value">{{ maskIdNumber(card.idNumber) }}</span>
              </div>
              <div class="summary-row">
                <span class="summary-label">余额:</span>
                <span class="summary-value amount">{{ formatCurrency(card.balance) }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 无数据提示 -->
        <div class="empty-state" v-else>
          <div class="empty-icon">
            <i class="bi bi-inbox"></i>
          </div>
          <div class="empty-title">未找到患者卡信息</div>
          <div class="empty-subtitle">
            查询条件 {{ getSearchCondition() }} 暂无相关患者卡信息
          </div>
        </div>
      </div>

      <!-- 使用说明 -->
      <div class="help-section" v-if="!hasSearched">
        <div class="help-card">
          <div class="help-header">
            <i class="bi bi-info-circle"></i>
            <span>使用说明</span>
          </div>
          <div class="help-content">
            <ul class="help-list">
              <li>请至少输入一个查询条件（姓名、手机号或身份证号）</li>
              <li>支持模糊查询，可以只输入部分信息</li>
              <li>手机号请输入11位数字</li>
              <li>身份证号请输入15位或18位</li>
              <li>点击详情按钮查看完整的患者卡信息</li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <!-- 加载状态 -->
    <div class="loading-overlay" v-if="loading">
      <div class="loading-content">
        <div class="spinner"></div>
        <div class="loading-text">正在查询患者卡信息...</div>
      </div>
    </div>

    <!-- 详情弹窗 -->
    <div class="mobile-modal" :class="{ 'show': showDetailDialog }" @click="closeDetailDialog">
      <div class="modal-content" @click.stop>
        <!-- 详情头部 -->
        <div class="modal-header">
          <h3 class="modal-title">
            <i class="bi bi-credit-card-2-front"></i>
            患者卡详情 - {{ selectedCard?.name }}
          </h3>
          <button class="modal-close" @click="closeDetailDialog">
            <i class="bi bi-x-lg"></i>
          </button>
        </div>

        <!-- 详情内容 -->
        <div class="modal-body" v-if="selectedCard">
          <div class="detail-content">
            <!-- 基本信息 -->
            <div class="detail-section">
              <div class="section-header">
                <i class="bi bi-person-lines-fill"></i>
                <span class="section-title">基本信息</span>
              </div>
              <div class="detail-grid">
                <div class="detail-item">
                  <span class="detail-label">患者ID:</span>
                  <span class="detail-value">{{ selectedCard.patientId || '-' }}</span>
                </div>
                <div class="detail-item">
                  <span class="detail-label">姓名:</span>
                  <span class="detail-value">{{ selectedCard.name || '-' }}</span>
                </div>
                <div class="detail-item">
                  <span class="detail-label">性别:</span>
                  <span class="detail-value">{{ selectedCard.sex || '-' }}</span>
                </div>
                <div class="detail-item">
                  <span class="detail-label">出生日期:</span>
                  <span class="detail-value">{{ formatDate(selectedCard.dateOfBirth) }}</span>
                </div>
                <div class="detail-item">
                  <span class="detail-label">身份证号:</span>
                  <span class="detail-value">{{ selectedCard.idNumber || '-' }}</span>
                </div>
                <div class="detail-item">
                  <span class="detail-label">手机号:</span>
                  <span class="detail-value phone">
                    <i class="bi bi-telephone"></i>
                    {{ selectedCard.phoneNumber1 || '-' }}
                  </span>
                </div>
              </div>
            </div>

            <!-- 账户信息 -->
            <div class="detail-section">
              <div class="section-header">
                <i class="bi bi-wallet2"></i>
                <span class="section-title">账户信息</span>
              </div>
              <div class="detail-grid">
                <div class="detail-item">
                  <span class="detail-label">账户余额:</span>
                  <span class="detail-value amount">{{ formatCurrency(selectedCard.balance) }}</span>
                </div>
                <div class="detail-item">
                  <span class="detail-label">创建时间:</span>
                  <span class="detail-value">{{ formatDateTime(selectedCard.createTime) }}</span>
                </div>
              </div>
            </div>

            <!-- 联系信息 -->
            <div class="detail-section">
              <div class="section-header">
                <i class="bi bi-geo-alt"></i>
                <span class="section-title">联系信息</span>
              </div>
              <div class="detail-grid">
                <div class="detail-item full-width">
                  <span class="detail-label">监护人地址:</span>
                  <span class="detail-value">{{ selectedCard.guardianAddr || '-' }}</span>
                </div>
                <div class="detail-item full-width">
                  <span class="detail-label">联系地址:</span>
                  <span class="detail-value">{{ selectedCard.contactAddrStreet || '-' }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import api from '@/utils/api'

const router = useRouter()

// 响应式数据
const patientName = ref('')
const phoneNumber = ref('')
const idNumber = ref('')
const phoneError = ref('')
const idError = ref('')
const loading = ref(false)
const hasSearched = ref(false)
const patientCards = ref([])
const showDetailDialog = ref(false)
const selectedCard = ref(null)

// 计算属性
const canQuery = computed(() => {
  return patientName.value.trim() || 
         (phoneNumber.value.trim() && !phoneError.value) || 
         (idNumber.value.trim() && !idError.value)
})

// 方法
const validatePhoneNumber = () => {
  const phone = phoneNumber.value
  if (!phone) {
    phoneError.value = ''
    return
  }
  
  if (!/^\d+$/.test(phone)) {
    phoneError.value = '手机号只能包含数字'
    return
  }
  
  if (phone.length > 11) {
    phoneNumber.value = phone.slice(0, 11)
    return
  }
  
  if (phone.length === 11 && !/^1[3-9]\d{9}$/.test(phone)) {
    phoneError.value = '请输入正确的手机号格式'
    return
  }
  
  phoneError.value = ''
}

const validateIdNumber = () => {
  const id = idNumber.value
  if (!id) {
    idError.value = ''
    return
  }
  
  if (!/^[0-9Xx]+$/.test(id)) {
    idError.value = '身份证号只能包含数字和字母X'
    return
  }
  
  if (id.length > 18) {
    idNumber.value = id.slice(0, 18)
    return
  }
  
  if (id.length !== 15 && id.length !== 18 && id.length > 0) {
    idError.value = '身份证号应为15位或18位'
    return
  }
  
  idError.value = ''
}

const queryPatientCardInfo = async () => {
  if (!canQuery.value) {
    return
  }

  loading.value = true
  hasSearched.value = false
  patientCards.value = []
  
  try {
    const response = await api.post('/api/PatientCardInfo/query', {
      name: patientName.value.trim() || '',
      phone: phoneNumber.value.trim() || '',
      idNumber: idNumber.value.trim() || ''
    })
    
    if (response.data.success) {
      const data = response.data.data || []
      // 按出生日期排序（从早到晚）
      patientCards.value = data.sort((a, b) => {
        if (!a.dateOfBirth && !b.dateOfBirth) return 0
        if (!a.dateOfBirth) return 1
        if (!b.dateOfBirth) return -1
        return new Date(a.dateOfBirth) - new Date(b.dateOfBirth)
      })
      hasSearched.value = true
    } else {
      throw new Error(response.data.message || '查询失败')
    }
  } catch (error) {
    console.error('查询患者卡信息失败:', error)
    patientCards.value = []
    hasSearched.value = true
    
    // 显示错误提示
    alert(error.message || '查询失败，请稍后重试')
  } finally {
    loading.value = false
  }
}

const refreshData = () => {
  if (hasSearched.value && canQuery.value) {
    queryPatientCardInfo()
  }
}

const goBack = () => {
  router.back()
}

const showCardDetail = (card) => {
  selectedCard.value = card
  showDetailDialog.value = true
}

const closeDetailDialog = () => {
  showDetailDialog.value = false
  selectedCard.value = null
}

const getSearchCondition = () => {
  const conditions = []
  if (patientName.value.trim()) conditions.push(`姓名: ${patientName.value.trim()}`)
  if (phoneNumber.value.trim()) conditions.push(`手机号: ${phoneNumber.value.trim()}`)
  if (idNumber.value.trim()) conditions.push(`身份证: ${idNumber.value.trim()}`)
  return conditions.join(', ')
}

// 工具方法
const maskIdNumber = (idNumber) => {
  if (!idNumber) return '-'
  if (idNumber.length <= 8) return idNumber
  return idNumber.slice(0, 4) + '****' + idNumber.slice(-4)
}

const formatPhoneNumber = (phone) => {
  if (!phone) return '-'
  if (phone.length === 11) {
    return phone.replace(/(\d{3})(\d{4})(\d{4})/, '$1 $2 $3')
  }
  return phone
}

const formatCurrency = (amount) => {
  if (amount === null || amount === undefined) return '¥0.00'
  return `¥${Number(amount).toFixed(2)}`
}

const formatDateTime = (dateTime) => {
  if (!dateTime) return '-'
  return new Date(dateTime).toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

const formatDate = (date) => {
  if (!date) return '-'
  return new Date(date).toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  })
}

// 组件挂载
onMounted(() => {
  // 页面初始化逻辑
})
</script>

<style scoped>
/* 基础布局 */
.mobile-card-query {
  min-height: 100vh;
  background: #f8f9fa;
  padding-bottom: env(safe-area-inset-bottom);
}

/* 顶部导航栏 */
.mobile-header {
  background: linear-gradient(135deg, #e8f5e8, #c8e6c9);
  color: #2e7d32;
  padding: 0.32rem;
  padding-top: calc(0.32rem + env(safe-area-inset-top));
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid #81c784;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
  color: #1b5e20;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 32px;
}

.header-title i {
  font-size: 1.1rem;
  line-height: 1;
}

.header-actions {
  display: flex;
  gap: 0.5rem;
}

.header-actions .btn {
  border-radius: 6px;
  width: 32px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-color: #388e3c;
  color: #388e3c;
  background: rgba(255, 255, 255, 0.8);
  font-size: 0.85rem;
}

.header-actions .btn:hover {
  background: #388e3c;
  color: white;
  border-color: #388e3c;
}

/* 主要内容区域 */
.mobile-content {
  padding: 1rem;
}

/* 查询表单 */
.query-section {
  margin-bottom: 2rem;
}

.query-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.query-header {
  background: linear-gradient(135deg, #4caf50, #388e3c);
  color: white;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.query-title {
  font-size: 1.1rem;
  font-weight: 600;
}

.query-body {
  padding: 1.5rem;
}

.input-wrapper {
  margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
  .input-group {
    display: block;
    margin-bottom: 1rem;
  }
  
  .input-label {
    display: block;
    font-weight: 600;
    color: #495057;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
  }
  
  .query-input {
    width: 100%;
    padding: 1.25rem 1rem;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    font-size: 1.1rem;
    line-height: 1.5;
    min-height: 3rem;
    transition: all 0.3s ease;
    background: #f8f9fa;
    box-sizing: border-box;
  }
}

@media (min-width: 769px) {
  .input-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
  }
  
  .input-label {
    font-weight: 600;
    color: #495057;
    font-size: 0.9rem;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 70px;
    width: 70px;
  }
  
  .query-input {
    flex: 1;
    min-width: 0;
    padding: 0.875rem 1rem;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: #f8f9fa;
    box-sizing: border-box;
  }
}

.query-input:focus {
  outline: none;
  border-color: #4caf50;
  background: white;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

@media (max-width: 768px) {
  .error-tip {
    color: #dc3545;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.25rem;
  }
}

@media (min-width: 769px) {
  .error-tip {
    color: #dc3545;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 70px;
    padding-left: 0.75rem;
  }
}

.query-btn {
  background: linear-gradient(135deg, #4caf50, #388e3c);
  border: none;
  border-radius: 12px;
  padding: 1rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: white;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.query-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(76, 175, 80, 0.3);
}

.query-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.spinner-small {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* 查询结果 */
.results-section {
  margin-bottom: 2rem;
}

.results-header {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 1rem 1.5rem;
  margin-bottom: 1rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.results-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #495057;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.results-info {
  color: #6c757d;
  font-size: 0.9rem;
}

/* 患者卡片列表 */
.card-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.card-item {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.card-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* 卡片头部 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e9ecef;
}

.patient-info {
  flex: 1;
}

.patient-name {
  font-size: 1.2rem;
  font-weight: 600;
  color: #495057;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.patient-name i {
  color: #4caf50;
}

.patient-id {
  font-size: 0.875rem;
  color: #6c757d;
}

.card-actions {
  flex-shrink: 0;
}

.detail-btn {
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  border-color: #4caf50;
  color: #4caf50;
}

.detail-btn:hover {
  background: #4caf50;
  color: white;
  border-color: #4caf50;
}

/* 卡片摘要信息 */
.card-summary {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .card-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

.summary-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.summary-label {
  font-weight: 600;
  color: #6c757d;
  font-size: 0.9rem;
  min-width: 60px;
  flex-shrink: 0;
}

.summary-value {
  color: #495057;
  font-size: 0.9rem;
  flex: 1;
}

.summary-value.phone {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: #4caf50;
}

.summary-value.amount {
  font-weight: 600;
  color: #28a745;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.empty-icon {
  font-size: 4rem;
  color: #adb5bd;
  margin-bottom: 1rem;
}

.empty-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #495057;
  margin-bottom: 0.5rem;
}

.empty-subtitle {
  color: #6c757d;
  font-size: 1rem;
}

/* 使用说明 */
.help-section {
  margin-bottom: 2rem;
}

.help-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.help-header {
  background: linear-gradient(135deg, #17a2b8, #138496);
  color: white;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}

.help-content {
  padding: 1.5rem;
}

.help-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.help-list li {
  padding: 0.5rem 0;
  border-bottom: 1px solid #e9ecef;
  position: relative;
  padding-left: 1.5rem;
}

.help-list li:last-child {
  border-bottom: none;
}

.help-list li:before {
  content: '•';
  color: #17a2b8;
  font-weight: bold;
  position: absolute;
  left: 0;
}

/* 加载状态 */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.loading-content {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #e9ecef;
  border-top: 4px solid #4caf50;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 1rem;
}

.loading-text {
  color: #495057;
  font-size: 1rem;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 详情弹窗 */
.mobile-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  padding: 1rem;
}

.mobile-modal.show {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  background: white;
  border-radius: 16px;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  transform: translateY(20px);
  transition: transform 0.3s ease;
}

.mobile-modal.show .modal-content {
  transform: translateY(0);
}

.modal-header {
  background: linear-gradient(135deg, #4caf50, #388e3c);
  color: white;
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.modal-close {
  background: none;
  border: none;
  color: white;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  transition: background 0.2s ease;
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.modal-body {
  padding: 0;
  max-height: calc(90vh - 80px);
  overflow-y: auto;
}

/* 详情内容 */
.detail-content {
  padding: 1.5rem;
}

.detail-section {
  margin-bottom: 2rem;
}

.detail-section:last-child {
  margin-bottom: 0;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #e9ecef;
}

.section-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #495057;
}

.section-header i {
  color: #4caf50;
  font-size: 1.2rem;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .detail-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.detail-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.75rem;
  background: #f8f9fa;
  border-radius: 8px;
}

.detail-item.full-width {
  grid-column: 1 / -1;
}

.detail-label {
  font-weight: 600;
  color: #6c757d;
  font-size: 0.9rem;
  min-width: 80px;
  flex-shrink: 0;
}

.detail-value {
  color: #495057;
  font-size: 0.9rem;
  flex: 1;
  word-break: break-all;
}

.detail-value.phone {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: #4caf50;
}

.detail-value.amount {
  font-weight: 600;
  color: #28a745;
  font-size: 1rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .mobile-content {
    padding: 0.75rem;
  }
  
  .query-body {
    padding: 1rem;
  }
  
  .card-item {
    padding: 1rem;
  }
  
  .input-group {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  
  .input-label {
    min-width: auto;
  }
  
  .error-tip {
    margin-left: 0;
  }
  
  .card-header {
    flex-direction: column;
    gap: 1rem;
  }
  
  .card-actions {
    align-self: stretch;
  }
  
  .detail-btn {
    width: 100%;
  }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
  .mobile-card-query {
    background: #121212;
    color: #ffffff;
  }

  .mobile-header {
    background: linear-gradient(135deg, #1a3a1a, #2a4a2a);
    color: #c8e6c9;
    border-bottom-color: #4caf50;
  }

  .header-title {
    color: #81c784;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  }

  .header-actions .btn {
    border-color: #66bb6a;
    color: #66bb6a;
    background: rgba(0, 0, 0, 0.3);
  }

  .header-actions .btn:hover {
    background: #66bb6a;
    color: #000;
    border-color: #66bb6a;
  }

  .query-card,
  .results-header,
  .card-item,
  .empty-state,
  .help-card {
    background: rgba(30, 30, 30, 0.95);
    color: #ffffff;
  }

  .input-label {
    color: rgba(255, 255, 255, 0.8);
  }

  .query-input {
    background: #2a2a2a;
    border-color: #444;
    color: #ffffff;
  }

  .query-input:focus {
    background: #333;
    border-color: #4caf50;
  }

  .patient-name,
  .results-title,
  .section-title,
  .empty-title {
    color: #ffffff;
  }

  .patient-id,
  .results-info,
  .summary-label,
  .detail-label,
  .empty-subtitle {
    color: rgba(255, 255, 255, 0.7);
  }

  .summary-value,
  .detail-value {
    color: rgba(255, 255, 255, 0.9);
  }

  .detail-item {
    background: #2a2a2a;
  }

  .card-header {
    border-bottom-color: #444;
  }

  .section-header {
    border-bottom-color: #444;
  }

  .help-list li {
    border-bottom-color: #444;
    color: rgba(255, 255, 255, 0.9);
  }

  .modal-content {
    background: #1e1e1e;
    color: #ffffff;
  }

  .modal-header {
    background: linear-gradient(135deg, #4caf50, #388e3c);
  }

  .modal-title {
    color: #ffffff;
  }
}

#app.dark-mode .mobile-card-query {
  background: #121212;
  color: #ffffff;
}

#app.dark-mode .mobile-header {
  background: linear-gradient(135deg, #1a3a1a, #2a4a2a);
  color: #c8e6c9;
  border-bottom-color: #4caf50;
}

#app.dark-mode .header-title {
  color: #81c784;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

#app.dark-mode .header-actions .btn {
  border-color: #66bb6a;
  color: #66bb6a;
  background: rgba(0, 0, 0, 0.3);
}

#app.dark-mode .header-actions .btn:hover {
  background: #66bb6a;
  color: #000;
  border-color: #66bb6a;
}

#app.dark-mode .query-card,
#app.dark-mode .results-header,
#app.dark-mode .card-item,
#app.dark-mode .empty-state,
#app.dark-mode .help-card {
  background: rgba(30, 30, 30, 0.95);
  color: #ffffff;
}

#app.dark-mode .input-label {
  color: rgba(255, 255, 255, 0.8);
}

#app.dark-mode .query-input {
  background: #2a2a2a;
  border-color: #444;
  color: #ffffff;
}

#app.dark-mode .query-input:focus {
  background: #333;
  border-color: #4caf50;
}

#app.dark-mode .patient-name,
#app.dark-mode .results-title,
#app.dark-mode .section-title,
#app.dark-mode .empty-title {
  color: #ffffff;
}

#app.dark-mode .patient-id,
#app.dark-mode .results-info,
#app.dark-mode .summary-label,
#app.dark-mode .detail-label,
#app.dark-mode .empty-subtitle {
  color: rgba(255, 255, 255, 0.7);
}

#app.dark-mode .summary-value,
#app.dark-mode .detail-value {
  color: rgba(255, 255, 255, 0.9);
}

#app.dark-mode .detail-item {
  background: #2a2a2a;
}

#app.dark-mode .card-header {
  border-bottom-color: #444;
}

#app.dark-mode .section-header {
  border-bottom-color: #444;
}

#app.dark-mode .help-list li {
  border-bottom-color: #444;
  color: rgba(255, 255, 255, 0.9);
}

#app.dark-mode .modal-content {
  background: #1e1e1e;
  color: #ffffff;
}

#app.dark-mode .modal-header {
  background: linear-gradient(135deg, #4caf50, #388e3c);
}

#app.dark-mode .modal-title {
  color: #ffffff;
}
</style>